<template>
  <div class="wap-container repairService" id="containerrepairService">
    <section class="top pt10 pr10 pl10 bgfff">
      <div class="sCodeBox">
        <span>提示：扫描二维码直接调出设备信息</span>
        <img src="~assets/images/icon_saomiao@2x.png" @click="sweepCode()" class="sCode" alt="">
      </div>
      <div class="mess-item star rowflex">
        <div class="c666 title-box">
          <div>区</div>
          <div>县</div>
        </div>
        <select @change="getCustomer" v-model="Gparam.county">
          <option value="placeholder" disabled selected class="hide">请选择区县</option>
          <option v-for="option in countyOptions" v-bind:value="option">
            {{ option }}
          </option>
        </select>
      </div>
      <div class="mess-item star rowflex">
        <div class="c666 title">营业网点</div>
        <select @change="" v-model="Gparam.customer.id" placeholder="请选择">
          <option value="placeholder" disabled selected class="hide">请选择营业网点</option>
          <option v-for="option in serviceObjectOptions" v-bind:value="option.id">
            {{ option.customerName }}
          </option>
        </select>
      </div>
      <div class="mess-item star rowflex">
        <div class="c666 title">设备编号</div>
        <span style="margin-left: 0.18rem">{{Gparam.id}}</span>
      </div>
      <div class="mess-item rowflex">
        <div class="c666 title-box">地图定位</div>
        <input style="margin-left: 0.18rem" @focus="choiceLocation" v-model="Gparam.address" type="text"
               placeholder="请填写"/>
      </div>
      <div class="mess-item star rowflex">
        <div class="c666 title">设备事由</div>
        <img src="~assets/images/icon_bitian@2x.png">
        <group :gutter="0" class="textarea">
          <x-textarea :show-counter="true" :max="140" placeholder="请填写"
                      style="width: 2.75rem; padding: 0; margin-left: 0" v-model="Gparam.appraiseInfo">
          </x-textarea>
        </group>
      </div>
      <div class="mess-item rowflex">
        <div @touchstart="videoFixStart" @touchend="videoFixEnd"
             class="videoBox">
          <div class="videoImg"></div>
          <span>拍照报修</span>
        </div>
        <div class="videoList">
          <div v-for="(item,index) in videoList" class="videoItem">
            <img :key="index" @click="deleteVideo(item)" src="~assets/images5/icon-tuihuih@2x.png"
                 class="itemImgBtn">
            <video v-if="item.type=='video'" controls="controls" :key="'video'+index"
                   class="itemVideo"
                   :src="_getPathNo(item.path)"></video>
            <img v-else="item.type=='video'" :key="'video'+index" class="previewer-img itemImg"
                 :src="_getPath(item.path)" alt="" @click="show(index)">
          </div>
        </div>
      </div>
      <div class="mess-item rowflex">
        <div @touchstart="voiceFixStart" @touchend="voiceFixEnd"
             style="height:0.7rem;width: 0.52rem;text-align: center">
          <div class="dioceImg"></div>
          <span>语音报修</span>
        </div>
        <div
          style="display: flex;overflow: auto;padding:0.1rem;border: #dfdfdf 1px solid;position: absolute;right: 0.18rem;left: 0.8rem;height:0.7rem;">
          <div v-for="(item,index) in voiceList"
               style="display: flex;line-height: 0.7rem;padding: 0.1rem 0.05rem 0.1rem 0px;">
            <img :key="index" @click="playVoice(item)" style="height:0.3rem;width: 0.9rem"
                 src="~assets/images5/icon-yuyinm@3x.png" alt="">
            <img :key="'voice'+index" @click="deleteVoice(item)" src="~assets/images5/icon-tuihuih@2x.png"
                 style="color: #C15E67;margin-top:0.05rem;height: 0.2rem;width: 0.2rem">
          </div>
        </div>
      </div>
      <input style="display: none" ref="imgInput" capture="camera" type="file" accept="image/*" @change="uploadImage">
      <input style="display: none" ref="vidInput" capture="camcorder" type="file" accept="video/*"
             @change="uploadVideo">
      <input style="display: none" ref="audInput" capture="microphone" type="file" accept="audio/*"
             @change="uploadAudio">
      <div class="mess-item rowflex">
        <div class="c666 title-box">
          <div>联</div>
          <div>系</div>
          <div>人</div>
        </div>
        <img src="~assets/images/icon_bitian@2x.png">
        <input id="phone" v-model="Gparam.name" type="text" placeholder="请填写"/>
      </div>
      <div class="mess-item rowflex">
        <div class="c666 title-box">
          <div>电</div>
          <div>话</div>
        </div>
        <img src="~assets/images/icon_bitian@2x.png">
        <input id="name" v-model="Gparam.phone" type="number" placeholder="请填写"/>
      </div>
      <div class="mess-item star rowflex">
        <div class="c666 title-box">工单类型</div>
        <img src="~assets/images/icon_bitian@2x.png">
        <input @click="showPopupWork(false)" style="margin-left:0.05rem;" v-model="workOrderTypeText" type="text"
               placeholder="请选择"/>
      </div>
    </section>
    <section class="bottom_bar cfff" @click="commitRepair()">
      提交报修
    </section>
    <div v-transfer-dom>
      <popup v-model="repairPopupWork" height="90%" style="background-color: #fff">
        <popup-header
          left-text="取消"
          right-text="确认"
          title="工单类型"
          :show-bottom-border="false"
          @on-click-left="showPopupWork(false)"
          @on-click-right="showPopupWork(true)"></popup-header>
        <checklist :options="GDWFLXList" v-model="chooseWFLX"></checklist>
      </popup>
    </div>
    <div v-transfer-dom>
      <popup v-model="repairPopup" height="90%" style="background-color: #fff">
        <popup-header
          left-text="取消"
          right-text="确认"
          title="设备故障图片"
          :show-bottom-border="false"
          @on-click-left="showPopup"
          @on-click-right="showPopup"></popup-header>
        <UploadImage :imgs="picPathList"></UploadImage>
      </popup>
    </div>
    <div v-transfer-dom>
      <popup v-model="showMap" height="90%">
        <popup-header
          left-text="取消"
          right-text="确定"
          title="选择位置"
          :show-bottom-border="false"
          @on-click-left="cancelMap"
          @on-click-right="sureMap"></popup-header>
        <x-input @on-change="searchSure(search)" :debounce="100" @on-enter="searchSure" class="weui-vcode"
                 v-model="search" placeholder="输入地址">
          <i slot="label" style="margin-right: 10px" class="fa fa-map-marker"></i>
        </x-input>
        <div id="container" style="height: calc(100% - 84px);width: 100%;"></div>
      </popup>
    </div>
    <div v-transfer-dom>
      <previewer :list="allImgs" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import {Popup, TransferDom, Group, XTextarea, PopupHeader, Checklist, XInput, Previewer} from 'vux'
  import UploadImage from './uploadImage.vue'
  import AMap from 'AMap'
  import icon from "@/assets/images/mark_b.png"

  export default {
    name: "RepairRercive",
    components: {Popup, UploadImage, Group, XTextarea, PopupHeader, Checklist, XInput, Previewer},
    directives: {
      TransferDom
    },
    data() {
      return {
        repairPopupWork: false,//服务类型选择
        userInfo: {},//用户信息
        repairPopup: false,//图片
        showMap: false,//地图
        search: '',//搜索
        GDWFLXList: [],
        chooseWFLX: [],
        Gparam: {
          phone: '',
          name: '',
          id: '',
          address: '',
          appraiseInfo: '',
          county: {},
          customer: {},
          workOrderType: [],//记录选择
        },
        location:{
          lng:'',
          lat:'',
        },
        countyOptions: [],//区县
        serviceObjectOptions: [],//服务对象
        picIdList: [],
        picPathList: [],
        voiceList: [],//语音列表
        videoList: [],//视频列表
        bindPhoneForm: {
          mobile: "",
          name: ""
        },
        options: {
          getThumbBoundsFn: (index) => {
            let thumbnail = document.querySelectorAll('.repairService .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }
      }
    },
    computed: {
      workOrderTypeText() {
        return this.Gparam.workOrderType.map(item => {
          return item.value;
        }).join(' / ')
      },
      allImgs() {
        return this.videoList.filter(item => {
          return item.type == 'picture';
        }).map(item => {
          return {msrc: this._getPathNo(item.path), src: this._getPathNo(item.path)}
        })
      }
    },
    created() {
      this.$register(['startRecord', 'stopRecord', 'playVoice', 'uploadVoice', 'onVoiceRecordEnd', 'chooseImage', 'uploadImage']);
    },
    mounted() {
      this.geocoder = new AMap.Geocoder({});
      this.lnglatSure = {}
      //  调用此页面时需要登录
      this.$getUserInfo().then(userInfo => {
        this.userInfo = userInfo
        this.Gparam.phone = userInfo.mobile
        if (userInfo.id === 'guest') {
        } else {
          this.Gparam.name = userInfo.nickName
        }
        this.$http.get('/work/api/workOrderType', {params: {serviceType: 'OUT', noPage: true}}).then(res => {
            this.GDWFLXList = res.data.data.map(item => {
              return {key: item.id, value: item.name}
            });
          }
        )
        this.getCountys()
      });
    },
    methods: {
      //图片预览
      show(index) {
        this.$refs.previewer.show(index)
      },
      //非微信拍照
      uploadImage(e) {
        if (e.currentTarget.files[0]) {
          var formData = new FormData();
          formData.append('file', e.currentTarget.files[0])
          this.$vux.loading.show({
            text: '上传中'
          });
          this.$http.post('/work/api/upload/prove', formData).then(res => {
            this.videoList.unshift({...res.data.data, type: 'picture'})
            this.$vux.loading.hide();
          });
        } else {
          this.$vux.toast.show({
            text: '请选择上传图片',
            type: 'warn'
          });
        }
      },
      //非微信拍视频
      uploadVideo(e) {
        if (e.currentTarget.files[0]) {
          var formData = new FormData();
          formData.append('file', e.currentTarget.files[0]);
          this.$vux.loading.show({
            text: '上传中'
          });
          this.$http.post('/work/api/upload/prove', formData).then(res => {
            this.videoList.unshift({...res.data.data, type: 'video'})
            this.$vux.loading.hide();
          })
        } else {
          this.$vux.toast.show({
            text: '请选择上传视频',
            type: 'warn'
          });
        }
      },
      //非微信录音
      uploadAudio(e) {
        if (e.currentTarget.files[0]) {
          var formData = new FormData();
          formData.append('file', e.currentTarget.files[0])
          this.$http.post('/work/api/upload/prove', formData).then(res => {
            this.voiceList.unshift(res.data.data)
          });
        } else {
          this.$vux.toast.show({
            text: '请选择上传录音',
            type: 'warn'
          });
        }
      },
      //视频拍照
      videoFixStart(e) {
        e.preventDefault();//阻止默认事件 w3c
        window.event.returnValue = false;//阻止默认事件 ie
        this.videoStartTime = new Date();
      },
      //视频拍照
      videoFixEnd(e) {
        //大于200毫秒默认长按，否则就是单击，注:单击拍照，长按视频
        if ((new Date() - this.videoStartTime) > 200) {
          this.$refs.vidInput.click();
        } else {
          if (this.$is_weixin()) {
            this.$wechat.chooseImage({
              sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
              success: (res) => {
                if (res.errMsg == 'chooseImage:ok') {
                  this.$wechat.uploadImage({
                    localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: (resp) => {
                      if (resp.errMsg == 'uploadImage:ok') {
                        this.isShowLoading = true
                        this.$http.post('/wechat/resource/prove', {
                          mediaId: resp.serverId
                        }).then(data => {
                          this.videoList.unshift({...data.data.data, type: 'picture'})
                        });
                      } else {
                        this.$vux.toast.show({
                          text: '上传视频失败',
                          type: 'warn'
                        });
                      }
                    }
                  });
                } else {
                  this.$vux.toast.show({
                    text: '选择视频失败',
                    type: 'warn'
                  });
                }
              },
            });
          }
          else {
            this.$refs.imgInput.click();
          }
        }
      },
      //删除照片
      deleteVideo(index) {
        this.videoList = this.videoList.filter(item => {
          return item.id != index.id;
        });
      },
      //删除录音
      deleteVoice(index) {
        this.voiceList = this.voiceList.filter(item => {
          return item.id != index.id;
        });
      },
      //播放录音
      playVoice(index) {
        this.$wechat.playVoice({
          localId: index.localId
        });
      },
      //语音报修-start
      voiceFixStart(e) {
        e.preventDefault();
        window.event.returnValue = false;
        this.voiceStartTime = new Date();
        if (this.$is_weixin()) {
          this.$wechat.startRecord();
          this.$vux.loading.show({
            text: '录音中'
          });
          this.$wechat.onVoiceRecordEnd({
            success: (res) => {
              this.voiceStop(res.localId);
            }
          });
        }
      },
      // 语音报修-end
      voiceFixEnd(e) {
        if ((new Date() - this.voiceStartTime) > 200) {
          if (this.$is_weixin()) {
            this.$wechat.stopRecord({
              success: (res) => {
                this.voiceStop(res.localId);
              }
            });
          } else {
            this.$refs.audInput.click();
          }
        } else {
          this.$vux.loading.hide();
        }
      },
      // 停止录音
      voiceStop(localId) {
        this.$vux.loading.hide();
        this.$wechat.uploadVoice({
          localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: (res) => {
            this.$http.post('/wechat/resource/prove', {
              mediaId: res.serverId
            }).then(data => {
              this.voiceList.unshift({...data.data.data, localId: localId});
            });
          }
        });
      },
      //取消选择
      cancelMap() {
        this.showMap = !this.showMap;
      },
      // 确定选择
      sureMap() {
        this.showMap = !this.showMap;
        this.Gparam.address = this.search;
      },
      //设置选择位置---逆向地理编码
      setLocation(lng, lat) {
        this.setMarkerAndCenter(lng, lat);
        this.geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
            this.search = result.regeocode && result.regeocode.formattedAddress;
          }
        })
      },
      //地图定位
      choiceLocation() {
        document.activeElement.blur();
        this.showMap = !this.showMap;
        this.search = this.Gparam.address || '';
        this.map = this.map || new AMap.Map('container', {
          resizeEnable: true,
          zoom: 15,
        });
        this.search && this.searchSure(this.search);
        this.map.on('click', (ev) => {
          var lnglat = ev.lnglat;
          this.isClickMap = true;
          this.setLocation(lnglat.lng, lnglat.lat);
        });
      },
      //搜索地址---正向地理编码
      searchSure(value) {
        //地址为空、用户点击选择地点不搜索，
        if (!value || this.isClickMap) {
          this.isClickMap = false;
          return;
        }
        this.geocoder.getLocation(value, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            this.setMarkerAndCenter(result.geocodes[0].location.lng, result.geocodes[0].location.lat);
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: '未找到相关地址'
            })
          }
        })
      },
      //设置选择位置---逆向地理编码
      setLocation(lng, lat) {
        this.setMarkerAndCenter(lng, lat);
        this.geocoder.getAddress([lng, lat], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
            this.search = result.regeocode && result.regeocode.formattedAddress;
          }
        })
      },
      //设置中心点坐标和标记
      setMarkerAndCenter(lng, lat) {
        this.location = {lng:lng, lat:lat,};
        if (this.marker) {
          this.marker.setPosition([lng, lat]);
        } else {
          this.marker = new AMap.Marker({
            icon: icon,
            position: [lng, lat]
          });
          this.marker.setMap(this.map);
        }
        this.map.setZoomAndCenter(this.map.getZoom() >= 16 ? this.map.getZoom() : this.map.getZoom() + 1, [lng, lat])
      },
      getCountys: function () {
        //区县获取
        this.$http.get('/work/api/customer/countys').then(res => {
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i] !== 'string' && res.data.data[i].length > 0) {
              this.countyOptions.push(res.data.data[i])
            }
          }
        })
      },
      getCustomer: function () {
        //获取区县下的服务对象
        this.$http.get('/work/api/customer/customerOfCountys?county=' + this.Gparam.county).then(res => {
          this.serviceObjectOptions = res.data.data
        })
      },
      // 扫描二维码
      sweepCode() {
        this.$register(['scanQRCode']).then(() => {
          this.$wechat.scanQRCode({
            needResult: 1,
            desc: '扫描设备编号',
            success: res => {
              if (res.errMsg === 'scanQRCode:ok') {
                this.Gparam.id = res.resultStr
                // 以后可以根据设备的编号查询地址并自动填充
              }
            }
          });
        }).catch((msg, error) => {
          alert(msg)
          console.log(error)
        })
      },
      commitRepair: function () {
        if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.Gparam.phone)) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入11位长度的电话号码'
          })
          return false
        }
        this.$getUserInfo().then(user => {
          if (user.id === 'guest') { // 访客
            this.bindPhoneForm.mobile = this.Gparam.phone
            this.bindPhoneForm.name = this.Gparam.name
            this.$http.post("/wechat/auth/bind", this.bindPhoneForm).then(res => {
              //绑定成功
              this.$getUserInfo().then(user => {
                this.userInfo = user
                this.postRepairService()
              })

            })
          } else {
            this.postRepairService()
          }
        })
      },
      postRepairService: function () {
        if (this.chooseWFLX.length > 0) {
          //故障描述判断
          if (this.Gparam.appraiseInfo.length < 1) {
            this.$vux.alert.show({
              title: '提示',
              content: '请填写设备故障'
            });
            return false
          }
          let data = {
            linkPhone: this.Gparam.phone,
            linkMan: this.Gparam.name,
            proposer: {
              id: this.userInfo.id
            },
            repairFileStore: this.videoList.map(item=>{
              return item.id
            }).join(';'),
            repairVoice:this.voiceList.map(item=>{
              return item.id
            }).join(';'),
            wkt:this.location.lng&&this.location.lat?'POINT('+this.location.lng+' '+ this.location.lat+')':undefined,
            workOrderType: null,
            errorDescription: this.Gparam.appraiseInfo,
            county: this.Gparam.county.length ? this.Gparam.county : null,
            customer: this.Gparam.customer.id ? this.Gparam.customer : null,
          };
          let promise = [];
          this.chooseWFLX.forEach(item=>{
            promise.push(new Promise(resolve => {
              this.$http.post('/work/api/request', {...data,workOrderType:{id:item}}).then(res=>{
                resolve()
              })
            }))
          });
          Promise.all(promise).then(()=>{
            this.$router.push({path: "/user/repairSuccess", query: {type: 'repair'}})
          });
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: '请至少选择一个服务类型'
          })
          return false
        }
      },
      addPic: function () {
        let formData = new FormData()
        let tag = 'logo'
        formData.append("file", document.getElementById("file").files[0])
        console.log(formData)
        this.$http.post('/work/api/upload/' + tag, formData).then(res => {
            let picPath = res.data.data.path
            let picId = res.data.data.id
            this.picPathList.push(picPath)
            this.picIdList.push(picId)
          }
        )
      },
      showPopupWork(index) {
        this.repairPopupWork = !this.repairPopupWork;
        if (index) {
          this.Gparam.workOrderType = this.GDWFLXList.filter(item => {
            return this.chooseWFLX.includes(item.key);
          })
        } else {
          this.chooseWFLX = this.Gparam.workOrderType.map(item => {
            return item.key;
          })
        }
      },
      showPopup: function () {
        this.repairPopup = !this.repairPopup
      },
    }
  }
</script>

<style lang="less">
  .wap-container {
    font-size: 0.13rem;
  }

  .repairService {
    .videoBox {
      height: 1.25rem;
      width: 0.52rem;
      text-align: center;
      padding: 0.3rem 0;
      .videoImg {
        height: 0.45rem;
        width: 0.45rem;
        background: url("~assets/images5/btn-paizhao@3x.png") no-repeat center center;
        background-size: cover;
      }
    }
    .videoList {
      display: flex;
      width: 2.75rem;
      border: #dfdfdf 1px solid;
      height: 1.25rem;
      overflow: auto;
      position: absolute;
      right: 0.18rem;
      left: 0.8rem;
      .videoItem {
        height: 1.2rem;
        width: 1.2rem;
        position: relative;
        text-align: center;
        line-height: 1rem;
        padding: 0.1rem;
        .itemImgBtn {
          color: #C15E67;
          position: absolute;
          height: 0.2rem;
          width: 0.2rem;
          right: 0;
          z-index: 2
        }
        .itemVideo{
          height:1rem;width: 1rem
        }
        .itemImg{
          height:1rem;width: 1rem
        }
      }
    }
    .dioceImg {
      height: 0.45rem;
      width: 0.45rem;
      background: url("~assets/images5/btn-yuyin@3x.png") no-repeat center center;
      background-size: cover;
    }
    .top {
      padding-bottom: 0.1rem;
      box-shadow: 0 0 0.04rem 0 #ebebeb;
      font-size: 0.13rem;
      position: absolute;
      top: 0;
      bottom: 0.43rem;
      right: 0;
      left: 0;
      overflow: auto;
    }
    .sCodeBox {
      text-align: center;
      line-height: 0.5rem;
      > span {
        color: red;
      }
      .sCode {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
    .mess-item {
      margin-top: 0.1rem;
      line-height: 0.25rem;
      width: 100%;
    }
    .top .mess-item:last-child {
      /*height: 1rem;*/
    }
    .mess-item img {
      width: 0.07rem;
      margin-right: 0.03rem;
    }
    textarea {
      width: 2.55rem;
      padding-left: 0.1rem;
      border-radius: 0.02rem;
    }
    .textarea {
      margin-left: 0.08rem;
      font-size: 0.13rem;
      border-radius: 0.02rem;
      border-top: #dfdfdf 1px solid;
    }
    .weui-textarea {
      font-size: 0.13rem;
      .weui-textarea-counter {
        font-size: 0.1rem;
        padding-right: 0.05rem;
      }
    }

    .vux-x-textarea.weui-cell {
      border-right: #dfdfdf 1px solid;
      border-left: #dfdfdf 1px solid;
    }
    .mess-item .title-box {
      width: 0.52rem;
      display: flex;
      justify-content: space-between;
    }
    .mess-item .title {
      width: 0.52rem;
    }
    input[type="text"], input[type="number"] {
      width: 2.75rem;
      height: 0.25rem;
      margin-left: 0.05rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    select {
      margin-left: 0.18rem;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      width: 2.75rem;
      padding-right: 0.2rem;
      font-size: 0.13rem;
      height: 0.25rem;
      line-height: 0.25rem;
      position: relative;
      z-index: 1;
      background: url("~assets/images2/icon_zuojian@2x.png") no-repeat 2.6rem center;
      background-size: 0.06rem 0.1rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .repair-type {
      display: flex;
      justify-content: space-around;
      margin-top: 0.12rem;
      font-size: 0.15rem;
    }
    .repair-item {
      display: flex;
    }
    .mark {
      width: 0.16rem;
      margin: 0.03rem 0 0 0.05rem;
      background: url("~assets/images/icon_nol@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .typeMark {
      color: #42a3fd;
    }
    .typeMark .mark {
      width: 0.16rem;
      margin: 0.03rem 0 0 0.05rem;
      background: url("~assets/images/icon_sel@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .repair-date {
      padding: 0 0.58rem;
      margin-top: 0.37rem;
      display: flex;
      justify-content: center;
    }
    .picItem {
      background: url("~assets/images/icon_paizhao@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
      width: 0.5rem;
      height: 0.5rem;
    }
    .voiceItem {
      background: url("~assets/images/icon_yuyin@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .voiceItem .fileVoice {
      border: 0;
      outline: 0;
      width: 0.5rem;
      height: 0.5rem;
      opacity: 0;
    }
    .picList {
      width: 0.52rem;
      height: 0.52rem;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
